<template>
  <div>
    <div class="ccui-multifunctional-table-wrapper">
      <ux-grid
        style="margin-bottom: 20px; width: 100%"
        ref="plxTable"
        border
        keep-source
        :highlightCurrentRow="false"
        :widthResize="true"
        show-overflow
        show-header-overflow="ellipsis"
        show-summary
        :summary-method="getSummaries"
        @select-all="handleCheckAllChange"
        @select="handleCheckChange"
        :header-cell-class-name="must"
        :edit-config="{ trigger: 'click', mode: 'cell' }"
      >
        <ux-table-column title="序号" type="index" width="50" fixed="left" :resizable="true"/>

        <ux-table-column
          :show-overflow-tooltip="true"
          field="storageListCode"
          title="批次号"
          width="260"
          fixed="left"
          :resizable="true"
        >
        </ux-table-column>

        <ux-table-column
          :show-overflow-tooltip="true"
          field="materialCode"
          title="设备物资编码"
          width="150"
          :resizable="true"
        >
          <template v-slot:edit="scope">
            <span>{{ scope.row.materialCode }}</span>
          </template>
        </ux-table-column>

        <ux-table-column
          :show-overflow-tooltip="true"
          field="materialName"
          title="设备物资名称"
          width="300"
          :resizable="true"
        >
        </ux-table-column>

        <ux-table-column
          :show-overflow-tooltip="true"
          field="materialState"
          title="设备物资说明"
          width="130"
          :resizable="true"
        >
        </ux-table-column>

        <ux-table-column
          :show-overflow-tooltip="true"
          field="measureUnit"
          title="计量单位"
          width="90"
          :resizable="true"
        >
        </ux-table-column>

        <ux-table-column
          :show-overflow-tooltip="true"
          field="unitPriceWithTax"
          title="含税单价"
          width="140"
          :resizable="true"
        >
        </ux-table-column>

        <ux-table-column
          :show-overflow-tooltip="true"
          field="moneyWithTax"
          title="含税金额"
          width="140"
          :resizable="true"
        >
        </ux-table-column>

        <ux-table-column
          :show-overflow-tooltip="true"
          field="writeoffCount"
          title="冲销数量"
          width="140"
          :resizable="true"
        >
        </ux-table-column>

        <ux-table-column
          :show-overflow-tooltip="true"
          field="moneyWithoutTax"
          title="不含税金额"
          width="140"
          :resizable="true"
        >
          <template v-slot:edit="scope">
            <span>{{ scope.row.moneyWithoutTax }}</span>
          </template>
        </ux-table-column>

        <ux-table-column title="关联入库单" width="200" :resizable="true">
          <template v-slot:default="scope">
            <span :title="scope.row.relationCode">{{
              scope.row.relationCode
            }}</span>
          </template>
        </ux-table-column>
      </ux-grid>
    </div>
  </div>
</template>

<script>
export default {
  name: "contractList",
  props: {
    priceFillingMethodType: String,
    taxRate: Number,
    storageList: Array
  },
  created() {
    console.log(this.$route.params.id, "id");
  },
  data() {
    return {
      form: {},
      rules: {},
      tableData: [],
      tableList: [], //子组件传来的参数
      // 选择合同弹窗组件
      formSearch: {
        pcConcId: "",
        materialsCode: "",
        materialsName: ""
      },
      dialogTableVisibleTextarea: false,
      dialogTableVisible: false, //控制弹窗显示隐藏
      tableDataDialogLeft: [],
      tableDataDialogRight: [],
      lineClampBody: true,
      concChangesDel: [], //主合同变更删除清单
      checkedList: [],
      code: 0
    };
  },
  watch: {
    storageList(newVal) {
      console.log(newVal);
      this.$nextTick(() => {
        this.$refs.plxTable.reloadData(newVal);
      });
    }
  },
  mounted() {},
  methods: {
    must(obj) {
      //给表头加必选标识
      if (obj.column.label == "冲销数量") {
        return "must";
      }
    },
    oninput(num) {
      //      debugger
      //正则替换
      //后来调试发现这个函数只能用于字符串，当是数字的时候就会报此错误
      var str = num.toString();
      str = str.replace(/[^\d.]/g, ""); // 保留数字   /[^\d.]/g, ""
      str = str.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
      str = str
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      console.log("input值", str);
      return str;
    },
    getblur(row) {
      row.replyNumber = this.numberFilter(row.replyNumber);
    },
    // 金额四舍五入 8位小数
    calculateFilter(data) {
      if (data || data == 0) {
        if ((data + "").indexOf(".") != -1) {
          let newData = (data + "").substring(0, (data + "").indexOf(".") + 9);
          return newData;
        } else {
          return data;
        }
      } else {
        return "";
      }
    },
    // 数量四舍五入
    numberFilter(data) {
      if (data || data == 0) {
        if ((data + "").indexOf(".") != -1) {
          let newData = (data + "").substring(0, (data + "").indexOf(".") + 3);
          return newData;
        } else {
          return data;
        }
      } else {
        return "";
      }
    },

    formSearchHandler() {},
    formSearchChange() {},
    // 列表单选 多选
    handleCheckAllChange(val) {
      if (val.length > 0) {
        val.forEach(item => {
          item.check = true;
        });
      }
    },
    handleCheckChange(val) {
      if (val.length > 0) {
        val.forEach(item => {
          item.check = true;
        });
      }
    },
    // 合计行
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              if (
                column.title == "冲销数量" ||
                column.title == "含税金额" ||
                column.title == "不含税金额"
              ) {
                return prev + curr;
              }
            } else {
              return prev;
            }
          }, 0);
          if (column.title == "冲销数量") {
            sums[index] = sums[index] ? sums[index].toFixed(3) : '';
          }
          if (column.title == "含税金额") {
            sums[index] = sums[index].toFixed(2);
          }
          if (column.title == "不含税金额") {
            sums[index] = sums[index].toFixed(2);
          }
        } else {
          sums[index] = "";
        }
      });
      return [sums];
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-table th.must > .cell:before {
  content: "*";
  color: #ff1818;
  margin-right: 5px;
}
.relationRight {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 5px;
}
/deep/ .ccui-multifunctional-table-wrapper {
  .el-table td,
  .el-table th.is-leaf {
    border-right: 1px solid #edf2fc;
  }
}
/deep/ .el-table__footer-wrapper {
  margin-top: 0px;
}

// 解决表格定位滚动条无法拖动
/deep/ .el-table__fixed-header-wrapper {
  th {
    pointer-events: auto;
  }
}
/deep/ .el-table__fixed,
/deep/.el-table__fixed-right {
  pointer-events: none;
  td {
    pointer-events: auto;
  }
}
</style>
